<template>
  <div class="resourcemanage">
    <Layout :style="{ padding: '0 24px 24px' }">
      <Breadcrumb :style="{ margin: '24px 0' }">
        <BreadcrumbItem to="/home"
          ><Icon type="ios-home-outline"></Icon>形拓资源网</BreadcrumbItem
        >
        <BreadcrumbItem
          ><Icon type="ios-list-box-outline" />个人中心</BreadcrumbItem
        >
        <BreadcrumbItem
          ><Icon type="ios-hand-outline" />操作管理</BreadcrumbItem
        >
      </Breadcrumb>
      <Content
        class="usercontent"
        :style="{
          padding: '24px',
          background: '#fff'
        }"
      >
        <h2 class="title">操作管理</h2>
        <Divider />
        <div class="selectbox">
          <Tag size="large" class="tagslect1">选择用户:</Tag>
          <Input
            v-model="model1"
            placeholder="请输入用户姓名"
            style="width:200px"
            clearable
            ref="secondslect1"
          >
            <Option
              v-for="item in firstIndexlist"
              :value="item.categoryId"
              :key="item.categoryId"
              >{{ item.categoryName }}</Option
            >
          </Input>
          <Tag size="large" class="tagslect2">选择操作类型:</Tag>
          <Select
            @on-change="SelectValue2"
            v-model="model2"
            placeholder="请选择操作类型"
            style="width:200px"
            clearable
            ref="secondslect2"
          >
            <Option v-for="item in secondIndexlist" :value="item" :key="item">{{
              item
            }}</Option>
          </Select>

          <Button
            type="primary"
            @click.native="SlectSearch"
            class="selectbtn"
            icon="ios-funnel"
            >筛选</Button
          >
          <Button icon="md-refresh" @click.native="ResetSelect">重置</Button>
        </div>
        <br />
        <Table
          border
          :columns="columns1"
          :data="
            resourceList.slice(
              (page.index - 1) * page.size,
              page.index * page.size
            )
          "
        >
        </Table>
        <Page
          show-total
          show-elevator
          :total="resourceList.length"
          :current="page.index"
          :page-size="page.size"
          class="pagenation"
          @on-change="PIndexChange"
        ></Page>
      </Content>
    </Layout>
  </div>
</template>
<script>
import UserApi from "../../api/Userapi.js";
import { type } from "os";

export default {
  data() {
    return {
      page: {
        index: 1,
        size: 10,
        total: 50
      },
      columns1: [
        {
          title: "操作序号",
          key: "operateId"
        },
        {
          title: "操作者",
          key: "operateUsername"
        },
        {
          title: "操作者序号",
          key: "operateUserId"
        },
        {
          title: "操作类型",
          key: "operateStyle"
        },
        {
          title: "操作文件",
          key: "operateInfo"
        },
        {
          title: "创建时间",
          key: "operateDate"
        }
      ],
      resourceList: [],
      maxSize: 100000,
      firstIndexlist: [],
      secondIndexlist: ["下载", "上传", "登录"],
      model1: "",
      model2: "",
      resourceId: -1,
      file: null,
      file2: null,
      versionnew: "",
      versionId: "",
      dataIntroduce: ""
    };
  },
  methods: {
    PIndexChange(i) {
      this.page.index = i;
    },

    GetAllOprate() {
      //获取首页所有资源
      var allparams = new URLSearchParams();
      allparams.append("pageSize", this.maxSize);
      allparams.append("pageNum", 1);

      this.axios
        .get(UserApi.adminGetOperate, {
          params: {
            pageNum: 1,
            pageSize: this.maxSize
          }
        })
        .then(res => {
          if (res.data.status == 0) {
            this.resourceList = res.data.data.list;
            window.console.log(this.resourceList);
            this.PIndexChange(1);
          } else {
            window.console.log("接口调用失败");
          }
        });
    },
    SelectValue2(e) {
      //获取筛选器操作类型选中值
      this.model2 = e;
      window.console.log(this.model2);
    },
    SlectSearch() {
      this.axios
        .get(UserApi.adminGetOperate, {
          params: {
            operateUsername: this.model1,
            operateStyle: this.model2,
            pageSize: this.maxSize,
            pageNum: 1
          }
        })
        .then(res => {
          if (res.data.status == 0) {
            if (res.data.data.list.length !== 0) {
              this.resourceList = res.data.data.list;
              window.console.log(this.resourceList);
              this.PIndexChange(1);
            } else {
              this.resourceList = [];
            }
          } else {
            window.console.log("筛选失败");
            this.$Message.error("筛选失败，接口错误！");
          }
        });
    },
    ResetSelect() {
      //重置筛选框
      this.model1 = "";
      this.$refs.secondslect2.clearSingleSelect();
      this.GetAllOprate();
    }
  },
  mounted() {
    this.GetAllOprate();
  },
  watch: {}
};
</script>
<style scoped>
.resourcemanage {
  position: relative;
  width: 100%;
}
.title {
  font-size: 0.28rem;
  font-weight: 700;
  font-family: "PingFang";
}
.usercontent {
  border-radius: 0.1rem;
}
.adduser {
  display: inline;
}
.pagenation {
  margin-top: 0.2rem;
}

.tagslect1 {
  font-family: "PingFang";
  font-size: 0.14rem;
}
.tagslect2 {
  font-family: "PingFang";
  font-size: 0.14rem;
  margin-left: 10px;
}
.selectbtn {
  margin: 0 10px;
}
.choicefile {
  display: flex;
  justify-content: center;
  text-align: center;
  font-family: "PingFang";
}
.ptitles {
  text-align: center;
  font-size: 16px;
  line-height: 40px;
  height: 25px;
  margin: 20px 0;
}
.modalfooter {
  display: flex;
  justify-content: center;
}
.uploadok {
  width: 200px;
  font-size: 18px;
}
.intro {
  width: 100%;
  display: flex;
  justify-content: center;
}
.progresstitle {
  margin-top: 0.2rem;
}
.progress {
  margin-top: 0.05rem;
  height: 0.3rem;
  line-height: 0.3rem;
  text-align: right;
  color: #ffffff;
  font-weight: bold;
  padding-right: 0.1rem;
}
</style>
